<template>
    <div>
        <div class="flex-row">
            <el-card shadow="always" class="left-container">
                <div slot="header" class="flex-between">
                    <span style="padding: 4px 0 4px 0">概览 <el-tooltip class="item" effect="dark" placement="top-start">
                            <div slot="content">
                                月收益已扣除第三方支付和服务费，为开发者最后所得。<br />
                                第三方支付费用为：2.38% <br />
                                掌上饥荒服务费为梯度计算：<br />
                                1. 月收益不满1000，收取5% <br />
                                2. 月收益高于1000不满10000的部分，收取10% <br />
                                3. 月收益高于10000的部分,收取15% <br />
                            </div>
                            <i class="el-icon-question gray-icon"></i>
                        </el-tooltip></span>
                </div>
                <p class="text-gray-400">月收益</p>
                <p class="text-gray-700">¥{{ toThousandFilter(total) }}</p>
                <div class="divider"></div>
                <div v-if="toDay" class="flex-between">
                    <div>
                        <p class="text-gray-400">今日收益</p>
                        <p class="text-gray-700">¥{{ toThousandFilter(toDay.total) }}</p>
                    </div>
                    <div>
                        <p class="text-gray-400 text-right">笔数</p>
                        <p class="text-gray-700">{{ toDay.count }}</p>
                    </div>
                </div>
                <div class="divider"></div>
                <div v-if="yesterday" class="flex-between">
                    <div>
                        <p class="text-gray-400">昨日收益</p>
                        <p class="text-gray-700">¥{{ toThousandFilter(yesterday.total) }}</p>
                    </div>
                    <div>
                        <p class="text-gray-400 text-right">笔数</p>
                        <p class="text-gray-700">{{ yesterday.count }}</p>
                    </div>
                </div>
            </el-card>
            <el-card shadow="always" class="skin-container">
                <div slot="header" class="flex-between">
                    <span>皮肤统计</span>
                    <div class="flex-between">
                        <el-date-picker v-model="time" type="month" value-format="yyyy-MM" placeholder="选择月"
                            size="small" @change="fetchData" style="max-width: 120px;">
                        </el-date-picker>
                        <el-select v-model="mod" size="small" placeholder="请选择" @change="fetchData"
                            style="margin-left: 16px;">
                            <el-option v-for="item in modList" :key="item._id" :label="item.name" :value="item._id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <ve-bar :data="skinData" :colors="['#3fb983','#35495e']" :settings="settings">
                </ve-bar>
            </el-card>
        </div>
        <div class="chart-container">
            <el-card shadow="always">
                <div slot="header" class="clearfix">
                    <span>月收益统计<el-tooltip class="item" effect="dark" content="未扣除服务费，第三方支付等相关费用" placement="top-start">
                            <i class="el-icon-question gray-icon"></i>
                        </el-tooltip></span>
                </div>
                <ve-line :data="chartData" :settings="settings" :colors="['#3fb983','#35495e']" height="350px">
                </ve-line>

            </el-card>
        </div>
    </div>
</template>
<script>
    import VeLine from 'v-charts/lib/line.common'
    import VeBar from 'v-charts/lib/bar.common'
    import moment from 'moment'
    export default {
        components: { VeLine, VeBar },
        data() {
            return {
                time: new Date(),
                mod: '',
                modList: [],
                settings: {},
                total: 0,
                toDay: null,
                yesterday: null,
                chartData: {
                    columns: ['日期', '金额(元)', '笔数'],
                    rows: []
                },
                skinData: {
                    columns: ['名称', '金额(元)', '笔数'],
                    rows: []
                }
            }
        },
        created() {
            this.getModList()
        },
        methods: {
            // 扣除掌上饥荒服务费和第三方支付费用
            getRealTotal(mtotal) {
                let num = mtotal * (1 - 0.0238) // 扣除第三方支付
                let one = 0
                let two = 0
                let three = 0
                // 第一阶段
                if (num > 1000) {
                    one = 1000 * 0.05
                } else {
                    one = num * 0.05
                }
                // 第二阶段
                if (num > 1000 && num <= 10000) {
                    two = (num - 1000) * 0.1
                }
                if (num > 10000) {
                    two = 9000 * 0.1
                }
                // 第三阶段
                if (num > 10000) {
                    three = (num - 10000) * 0.15
                }
                console.log(num, one, two, '---')
                return num - one - two - three
            },
            async getModList() {
                let res = await this.axios("/mods", {
                    params: {
                        version: this.$store.state.version,
                    },
                });
                this.modList = res.data;
                this.mod = res.data[0]._id
                this.fetchData()
            },
            toThousandFilter(num) {
                return (+num || 0).toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
            },
            async fetchData() {
                let res = await this.axios('/modskin/report', {
                    params: {
                        mid: this.mod,
                        time: moment(this.time).format('YYYY-MM')
                    }
                })
                this.total = this.getRealTotal(res.data.monthTotal)
                this.chartData.rows = res.data.orderList.map(val => {
                    return {
                        '日期': val._id,
                        '金额(元)': val.total,
                        '笔数': val.count
                    }
                })
                if (!this.toDay) {
                    this.toDay = res.data.orderList[res.data.orderList.length - 1]
                    this.yesterday = res.data.orderList[res.data.orderList.length - 2]
                }
                this.skinData.rows = res.data.skinList.map(val => {
                    return {
                        '名称': val.skinInfo.name,
                        '金额(元)': val.total,
                        '笔数': val.count
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .chart-container {
        padding: 0 16px;
    }

    .flex-row {
        display: flex;
        flex-flow: row nowrap;
        padding: 16px;
    }

    .flex-between {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }

    .left-container {
        flex-basis: 30%;
        height: 400px;
    }

    .skin-container {
        flex-grow: 1;
        margin-left: 16px;
        height: 400px;
        overflow-y: scroll;
    }

    .text-gray-400 {
        font-size: 14px;
        color: rgba(75, 85, 99, 1);
    }

    .text-gray-700 {
        margin-top: 4px;
        font-size: 28px;
        color: rgba(55, 65, 81, 1);
        font-weight: 600;
    }

    .divider {
        margin-top: 16px;
        margin-bottom: 16px;
        width: 100%;
        height: 1px;
        background-color: #ededed;
    }

    .text-right {
        text-align: right;
    }

    .gray-icon {
        color: #999;
        font-size: 16px;
    }
</style>